<template>
    <div class="header">
        <img class="vp-back-img" src="../../assets/img/china/flower.png" alt="">
        <div class="c-header-container">
            <div class="h-title">
                <img src="../../assets/img/china/title.png" alt="">
            </div>
            <div class="c-black">
                2017年——济南
            </div>
            <div class="c-header-text">
                <div>主办单位：中央济南市委宣传部、济南市精神文明建设委员会办公室、共青团济南市委、济南市教育局、济南市文化广电新闻出版局、济南市学生联合会、济南市少工委</div>
                <div>承办单位：济南市府学文庙管理处、济南尔德教育咨询有限公司——夫子书院</div>
            </div>
            <div class="c-header-form">
                <!--<img src="../../assets/img/china/book_left.png" alt="">-->
                <div class="c-header-form-button">
                    <div>
                        <button class="vp-btn vp-btn-red" type="button" @click="want(1)">我要报名</button>
                    </div>
                    <div>
                        <span @click="want(3)">已报名，开始答题</span>
                    </div>
                </div>
                <!--<img src="../../assets/img/china/book_right.png" alt="">-->
            </div>
        </div>
        <div class="vp-mb" v-show="status == 1">
            <div class="c-form">
                <img class="c-form-close" src="../../assets/img/china/close.png" alt="" @click="close">
                <div class="c-form-title">
                    填写报名信息
                </div>
                <div class="c-form-item">
                    <div class="c-form-input">
                        <input type="text" placeholder="输入姓名" v-model="message.user_name">
                    </div>
                    <div class="c-form-input">
                        <select name="" v-model="message.sex">
                            <option value="0">选择性别</option>
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                    <div class="c-form-input">
                        <el-date-picker
                                v-model="message.birthday"
                                type="date"
                                placeholder="出生年月">
                        </el-date-picker>
                    </div>
                    <div class="c-form-input c-form-select">
                        <select v-model="message.area" class="span-sel" @change="getSchool(message.area)">
                            <option v-for="item in list.area" :value="item.key">{{item.value}}</option>
                        </select>
                        <select v-model="message.school" class="span-sel">
                            <option v-for="item in list.school" :value="item.key">{{item.value}}</option>
                        </select>
                    </div>
                    <div class="c-form-input">
                        <select v-model="message.grade" value="0">
                            <option v-for="item in list.grade" :value="item.key">{{item.value}}</option>
                        </select>
                    </div>
                    <div class="c-form-input">
                        <input type="text" placeholder="班级或院校" v-model="message.banji">
                    </div>
                    <div class="c-form-input">
                        <input type="text" v-model="message.name" placeholder="家长姓名">
                    </div>
                    <div class="c-form-input c-form-phone">
                        <input type="tel" placeholder="联系电话" v-model.number="message.mobile">
                        <button class="vp-btn vp-btn-default" type="button" v-if="sms != '发送验证码'">{{sms}}S</button>
                        <button class="vp-btn vp-btn-primary" type="button" v-if="sms == '发送验证码'" @click="sendSms">{{sms}}</button>
                    </div>
                    <div class="c-form-input">
                        <input type="tel" placeholder="手机验证码" v-model.number="message.code">
                    </div>
                    <div class="c-form-input">
                        <input type="text" placeholder="指导老师" v-model="message.teacher">
                    </div>
                    <div class="c-form-input">
                        <button class="vp-btn vp-btn-red" type="button" @click="submit">提交</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="vp-mb" v-show="status == 2">
            <div class="c-form">
                <img class="c-form-close" src="../../assets/img/china/close.png" alt="" @click="close">
                <div class="c-form-title">
                    报名成功！
                </div>
                <div class="c-form-item ">
                    <div class="c-form-input c-form-text">
                        <div>您的登陆账号就是您的手机号</div>
                        <div>默认密码是<span>888888</span></div>
                    </div>
                    <div class="c-form-input">
                        <button class="vp-btn vp-btn-red" type="button" @click="want(3)">去登陆开始答题</button>
                    </div>
                    <div class="c-form-input c-form-text">
                        <i @click="close">稍后答题</i>
                    </div>
                </div>
            </div>
        </div>
        <div class="vp-mb" v-show="status == 3">
            <div class="c-form">
                <img class="c-form-close" src="../../assets/img/china/close.png" alt="" @click="close">
                <div class="c-form-title">
                    登录账号
                </div>
                <div class="c-form-item">
                    <div class="c-form-input">
                        <input type="tel" placeholder="输入手机号" v-model="loginMsg.mobile">
                    </div>
                    <div class="c-form-input">
                        <input type="password" placeholder="输入密码" v-model="loginMsg.pwd">
                    </div>
                    <div class="c-form-input">
                        <button class="vp-btn vp-btn-red" type="button" @click="login">登录</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { Checks } from '../../pages/Verification';
    export default {
        name:'header',

        data() {
          return {
              status: 0,

              sms:'发送验证码',

              code:'nlcnaslkdncjkb',

              message:{
                  user_name:'',
                  mobile:'',
                  sex:'0',
                  school:'0',
                  area:'0',
                  grade:'0',
                  code:'',
                  name:'',
                  banji:'',
                  teacher:'',
                  birthday:''
              },

              loginMsg:{
                mobile:'',
                  pwd:''
              },

              list:{
                  area:[{ key: '0', value:'所在区域' }],
                  grade:[{ key: '0', value:'年级' }],
                  school:[{ key: '0', value:'选择学校' }],
              }
          }
        },

        methods: {
            sendSms() {
                if (!Checks.CheckPhone(this.message.mobile)) {
                    this.$message.error('请填写正确的手机号码')
                } else {
                    this.axios.get('set_code',{ params: { mobile: this.message.mobile}})
                        .then(data => {
                            if (data.status == 200) {
                                this.$message.success('手机验证码已发送，请注意查收');
                                this.code = data.data;
                                this.sms = 60;
                                let time = setInterval(() => {
                                    this.sms -= 1;
                                    if (this.sms <= 0) {
                                        this.sms = '发送验证码';
                                        clearInterval(time);
                                    }
                                },1000);
                            } else {
                                this.$message.error('手机验证码发送失败，请重新获取');
                            }
                        })
                }
            },

            want(status) {
                if (status === 3 && localStorage.slug_id) {
                    this.$message.success('您已经登陆过了，直接开始答题吧！');
                    this.$router.push('/topic/choose');
                    return;
                }
                this.status = status;
                document.querySelector('body').style.overflow = 'hidden';
            },

            getMsg () {

            },

            submit() {
//                let date = new Date();
//                this.list.school.push({ key: '1', value:'选择学校' });
//                this.message = {
//                    user_name:'asd',
//                    mobile:18833636215,
//                    code:1314,
//                    sex:'1',
//                    school:'1',
//                    area:'1',
//                    grade:'1',
//                    name:'asd',
//                    banji:'asd',
//                    teacher:'asd',
//                    birthday:date
//                };
                try {
                    if (!Checks.CheckName(this.message.user_name)) {
                        throw new Error('姓名输入不合法')
                    }
                    if (!Checks.CheckPhone(this.message.mobile)) {
                        throw new Error('手机格式不正确')
                    }
                    if (this.message.sex == '0') {
                        throw new Error('请选择性别')
                    }
                    if (this.message.school == '0') {
                        throw new Error('请选择学校')
                    }
                    if (this.message.area == '0') {
                        throw new Error('请选择区域')
                    }
                    if (this.message.grade == '0') {
                        throw new Error('请选择年级')
                    }
                    if (this.message.banji == '') {
                        throw new Error('请填写班级或院校')
                    }
                    if (this.message.code != this.code) {
                        throw new Error('手机验证码错误')
                    }
                    if (!Checks.CheckName(this.message.name)) {
                        throw new Error('家长姓名格式错误')
                    }
                    if (!Checks.CheckName(this.message.teacher)) {
                        throw new Error('指导老师姓名格式错误')
                    }
                } catch (e) {
                    this.$message.error(e.message);
                    return;
                }
                console.log(this.message);
                this.axios.post('register',this.message)
                    .then(data => {
                        if (data.status != 200) {
                            let msg = data.msg ? data.msg : '信息填写有误';
                            this.$message.error(msg);
                        } else {
                            this.$message.success('报名成功！');
                            localStorage.removeItem("slug_id");
                            this.status = 2;
                            localStorage.slug = true;
                        }
                    });
                document.querySelector('body').style.overflow = 'inherit';
            },

            login() {
//                let date = new Date();
//                this.list.school.push({ key: '1', value:'选择学校' });
//                this.loginMsg = {
//                    mobile:18833636215,
//                    pwd:'888888'
//                };
                try {
                    if (this.loginMsg.pwd != '888888') {
                        throw new Error('密码错误')
                    }
                    if (!Checks.CheckPhone(this.loginMsg.mobile)) {
                        throw new Error('手机格式不正确')
                    }
                } catch (e) {
                    this.$message.error(e.message);
                    return;
                }
                console.log(this.message);
                this.axios.post('set_register',this.loginMsg)
                    .then(data => {
                        if (data.status != 200) {
                            let msg = data.msg ? data.msg : '信息填写有误';
                            this.$message.error(msg);
                        } else {
                            this.$message.success('登陆成功！请开始答题！');
                            localStorage.slug_id = data.data.id;
                            localStorage.level = data.data.level;
                            localStorage.slug = false;
                            this.$router.push('/topic/choose');
                        }
                    });
                document.querySelector('body').style.overflow = 'inherit';
            },

            close(status) {
                this.status = 0;
                document.querySelector('body').style.overflow = 'inherit';
            },

            //获取学校
            getSchool(id) {
                this.message.school = '0';
                if (id == 0) {
                    this.list.school = [{ key: '0', value:'选择学校' }];
                    return;
                }
                this.axios.get('get_area', {params:{id}})
                    .then(data => {
                        data = data.data;
                        data.forEach(item => {
                            let options = {};
                            options.key = item.id;
                            options.value = item.name;
                            this.list.school.push(options);
                        })
                    });
            },

            locationHref(url) {
                this.$router.push(url);
            }
        },

        mounted() {
            // 获取区域
            this.axios.get('get_area')
                .then(data => {
                    data = data.data;
                    data.forEach(item => {
                        let options = {};
                        options.key = item.id;
                        options.value = item.name;
                        this.list.area.push(options);
                    })
                });

            //获取年级
            this.axios.get('get_grade')
                .then(data => {
                    data = data.data;
                    let i = 0;
                    for (let key in data) {
                        let options = {};
                        options.key = ++i;
                        options.value = data[key];
                        this.list.grade.push(options);
                    }
                });
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import '../../plugins/assets/css/flex.less';

    .header{
        position: relative;
        width:100%;
    }
    .vp-back-img{
        position: absolute;
    }
    .c-header-container{
        margin: 0 auto;
        width:80%;
    }
    .h-title{
        padding: 50px;
        text-align: center;
    }
    .c-black{
        background: url("../../assets/img/china/black.png") 0 0 no-repeat;
        color: #fff;
        font-size: 24px;
        line-height: 50px;
        text-align: center;
        width:450px;
        height:50px;
        margin:30px auto;
        letter-spacing: 3px;
    }
    .c-header-text{
        font-size:18px;
        font-weight:bold;
        line-height: 23px;
        width: 60%;
        margin:50px auto;
        div{
            margin-bottom: 20px;
        }
    }
    .c-header-form{
        overflow: hidden;
        margin-bottom:30px;
        .flex-auto;
        &-button{
            div{
                text-align: center;
            }
            :first-child{
                margin-bottom:20px;
            }
            button{
                width: 150px;
                height:50px;
                font-weight:bold;
                font-size:20px;
            }
            span{
                font-size:24px;
                color: #474646;
                font-weight:bold;
                text-decoration: underline;
                cursor: pointer;
            }
        }
    }
    .vp-mb {
        .c-form {
            max-height: 95%;
            overflow: auto;
            border-radius: 20px;
            background: url('../../assets/img/china/back.png') 0 0 no-repeat;
            background-size:cover ;
            padding: 20px 50px;
            position: absolute;
            width: 30%;
            left: 50%;
            top:5%;
            .translate(-50%,0);
            &-title{
                font-size:20px;
                color: #B12828;
                text-align: center;
                font-weight:bold;
                margin-top:20px;
            }
            &-close {
                position: absolute;
                right:5%;
                top:20px;
                cursor: pointer;
            }
            &-item {
                width: 80%;
                margin:50px auto;
                .c-form-input {
                    margin-bottom: 10px;
                    input {
                        padding: 10px;
                        width:100%;
                        border:2px solid #CFA972;
                    }
                    select {
                        .box-sizing;
                        background: transparent;
                        padding: 10px;
                        width:105%;
                        border:2px solid #CFA972;
                    }
                    .vp-btn-red {
                        width:105%;
                        padding: 15px;
                        font-size:20px;
                        margin:0;
                    }
                    .span-sel {
                        width: 45%;
                    }
                    > div {
                        text-align: center;
                    }
                }
            }
            &-select {
                .flex-between;
            }
            .c-form-text {
                color:#474747;
                line-height:28px;
                font-size:18px;
                font-weight:bold;
                span {
                    color: #B12828;
                }
                i {
                    text-decoration: underline;
                    cursor: pointer;
                }
            }
            .c-form-phone {
                .flex-between;
                width: 100%;
                input {
                    width: 50%;
                }
                button {
                    width: 30%;
                    margin:0;
                    height:40px;
                }
            }
        }
    }

    @media screen and (max-width: 768px) {
        .header{
            position: relative;
            width:100%;
        }
        .vp-back-img{
            position: absolute;
        }
        .c-header-container{
            margin: 0 auto;
            width:80%;
        }
        .h-title{
            padding: 50px 0 0 0;
            text-align: center;
            img {
                width: 100%;
            }
        }
        .c-black{
            background: url("../../assets/img/china/black.png") 0 0 no-repeat;
            color: #fff;
            font-size: 15px;
            text-align: center;
            width:80vw;
            height:8vw;
            line-height: 8vw;
            margin:0 auto;
        }
        .c-header-text{
            font-size:14px;
            font-weight:bold;
            width: 80%;
            margin:5vw auto;
            div{
                margin-bottom: 1vw;
            }
        }
        .c-header-form{
            overflow: hidden;
            .flex-auto;
            > img {
                width:25%;
            }
            > div {
                width: 40%;
            }
            &-button{
                div{
                    text-align: center;
                }
                :first-child {
                    margin-bottom: 0;
                }
                button{
                    width: 25vw;
                    height:10vw;
                    font-weight:bold;
                    font-size:1vw;
                    margin:0;
                }
                span{
                    font-size:1vw;
                    color: #474646;
                    font-weight:bold;
                    text-decoration: underline;
                }
            }
        }
        .vp-mb {
            .c-form {
                border-radius: 20px;
                background: url('../../assets/img/china/back.png') 0 0 no-repeat;
                background-size:cover ;
                padding: 2vw 5vw;
                position: absolute;
                width: 80%;
                left: 50%;
                top:2%;
                .translate(-50%,0);
                &-title{
                    font-size:20px;
                    color: #B12828;
                    text-align: center;
                    font-weight:bold;
                    margin-top:20px;
                }
                &-close {
                    position: absolute;
                    right:5%;
                    top:20px;
                    cursor: pointer;
                }
                &-item {
                    width: 80%;
                    margin:10px auto;
                    .c-form-input {
                        margin-bottom: 10px;
                        input {
                            padding: 10px;
                            width:100%;
                            border:2px solid #CFA972;
                            height:10px;
                        }
                        select {
                            .box-sizing;
                            background: transparent;
                            padding: 5px;
                            width:105%;
                            border:2px solid #CFA972;
                        }
                        .vp-btn-red {
                            width:105%;
                            padding: 15px;
                            font-size:20px;
                            margin:0;
                        }
                        .span-sel {
                            width: 45%;
                        }
                        > div {
                            text-align: center;
                        }
                    }
                }
                &-select {
                    .flex-between;
                }
                .c-form-text {
                    color:#474747;
                    line-height:28px;
                    font-size:18px;
                    font-weight:bold;
                    span {
                        color: #B12828;
                    }
                    i {
                        text-decoration: underline;
                        cursor: pointer;
                    }
                }
                .c-form-phone {
                    .flex-between;
                    width: 100%;
                    input {
                        width: 50%;
                    }
                    button {
                        width: 30%;
                        margin:0;
                        height:40px;
                    }
                }
            }
        }
    }
</style>
<style lang="less" rel="stylesheet/less" type="text/css">
    .c-form-input {
        margin-bottom: 10px;
        .el-input__inner{
            padding: 10px;
            width:100%;
            border:2px solid #CFA972;
            border-radius:0;
            background: transparent;
        }
        .el-date-editor{
            width:105%;
        }
    }
</style>